<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件模板抽离</title>
</head>
<body>
<div id="app">
    <h1>{{message}}</h1>
    <cpn1></cpn1>
</div>
<!--1.第一种模板分离的写法-->
<!--<script type="text/x-template" id="cpn1">-->
<!--    <div>-->
<!--        <h1>我是模板分离的第一种写法</h1>-->
<!--    </div>-->
<!--</script>-->

<!--2.第二种模板分离-->
<template id="cpn2">
    <div>
        <h1>第二种模板的写法</h1>
    </div>
</template>
<script src="../../js/vue.js"></script>
<script>
    //1.模板分离的第一种写法
    Vue.component('cpn1', {
        template: "#cpn2",
    });
    new Vue({
        el: "#app",
        data: {
            message: "你好，世界",
        }
    })
</script>
</body>
</html>